<template>
  <div class="markdown-box">
    <textarea class="form-control" :id="name" :name="name" v-model="body" placeholder=""></textarea>
    <div class="markdown-preview" v-html="preview"></div>
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: "body"
      },
      value: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        body: this.value
      }
    },
    computed: {
      preview: function () {
        return marked(this.body);
      }
    }
  }
</script>

<style lang="scss" scoped>

  .markdown-box textarea {
    height: 300px;
  }

  .markdown-preview {
    background: #fff;
    border: 1px #ccc dashed;
    margin-top: 20px;
    padding: 10px 20px;
  }
</style>